<template>
  <div id="">
    <headerbox :hasBack="false" :headerTitle="'筛选'" :headerRightTxt="'确认'" @headerRightEvent="headerRightEvent"></headerbox>

    <p class="p10" style="margin-top:50px;">运动类型</p>
    <div class="flexbox">
      <span v-for="(classify,index) in classifyList" :key="classify.key"
      :class="{'active':classify.isChoose}"
      @click="chooseClass(index)">
        {{classify.classifyName}}
      </span>
    </div>
    <div class="" v-if="skillType!=3">
      <p class="p10">运动水平</p>
      <div class="flexbox">
        <span v-for="(lever,index) in sportsLev" :key="lever.key"
        :class="{'active':lever.isChoose}"
        @click="chooseLeval(index)">
          {{lever.sportsLevName}}
        </span>
      </div>

      <ul class="formList">
        <li class="justify-content" @click="chooseSex">
          <span>性别</span>
          {{sexValue.name}}
        </li>
      </ul>
    </div>


    <div class="pickerBox" v-if="sexVisible">
      <div class="justify-content p10">
        <span @click="cancleSexChange">取消</span>
        <span @click="sureSexChange">确定</span>
      </div>
      <mt-picker :slots="sexSlots" :valueKey="'name'" @change="sexChange"></mt-picker>
    </div>
  </div>
</template>
<script>
import { getClassifyList } from '@/utils/ajaxRequest.js';
let sexStr = '';
export default {
  name: "",
  props: ['skillType'],
  data: () => ({
    classifyList:[],    //类别
    sportsLev:[
      {id:'0',sportsLevName:'初级',isChoose:false},
      {id:'1',sportsLevName:'中级',isChoose:false},
      {id:'1',sportsLevName:'高级',isChoose:false}
    ],   //运动水平
    sexSlots:[{
      flex: 1,
      values: [{id:'',name:'全部'},{id:'0',name:'女'},{id:'1',name:'男'}],
      className: 'slot1',
      textAlign: 'center'
    }],
    sexValue:{id:'',name:'全部'},   //性别
    sexVisible:false,

    // 选择的项存储
    pro_type:[],    //类别，可以多个
    sportsLevValue:'',    //运动水平
    levelIdx:0,
  }),
  methods: {
    // 选择性别
    chooseSex() {
      console.log(this.sexSlots);
      this.sexVisible = true;
    },
    sexChange(picker,values) {
      this.sexValue = values[0];
      sexStr = values[0];
    },
    cancleSexChange() {
      this.sexVisible = false;
    },
    sureSexChange() {
      console.log(sexStr);
      this.sexValue = sexStr;
      this.sexVisible = false;
    },
    // 选择类别
    chooseClass(index) {
      let isChoose = this.classifyList[index].isChoose;
      this.classifyList[index].isChoose = !isChoose;
      if(this.classifyList[index].isChoose) {
        this.pro_type.push(this.classifyList[index].id);
      }else{
        let  proType = this.pro_type;
        for (var idx in proType) {
          console.log(proType[idx]);
          if (proType[idx] == this.classifyList[index].id) {
            console.log(idx);
            proType.splice(idx,1);
          }
        }
        this.pro_type = proType;
      }
      console.log(this.pro_type);
    },
    // 选择运动水平
    chooseLeval(index) {
      this.levelIdx = index;
      console.log(index);
      let sportsLev = this.sportsLev;
      for (var idx in sportsLev) {
        if (idx!=index) {
          sportsLev[idx].isChoose = false;
        }
      }
      let isChoose = this.sportsLev[index].isChoose;
      this.sportsLev[index].isChoose = !isChoose;
      if (this.sportsLev[index].isChoose) {
        this.sportsLevValue = this.sportsLev[index].id;
      }else{
        this.sportsLevValue = '';
      }
    },
    // 选择好后关闭弹出层
    headerRightEvent() {
      this.$emit('filterEvent',{
        sexValue:this.sexValue,
        pro_type:this.pro_type,
        sportsLevValue:this.sportsLevValue,
      });
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    // 获取分类
    getClassifyList().then(res=>{
      console.log(res);
      if(res){
        let classifyList = res.data.result;
        for (var i = 0; i < classifyList.length; i++) {
          classifyList[i].isChoose = false;
        }
        self.classifyList = classifyList;
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.flexbox{
  @include flex;
  flex-wrap: wrap;
  span{
    width: 30%;
    margin-left: 1%;
    margin-bottom: 10px;
    border:1px solid $borderColor;
    text-align: center;
    height: 30px; line-height: 30px;
    border-radius: 6px;
    &.active{
      background: $blueColor;
      color: white;
    }
  }
}
.pickerBox{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background: $boxBgcolor;
  border-top: 1px solid $boxBgcolor;
  .justify-content{
    background: $lightBlue;
  }
}
</style>
